import { mapState } from 'vuex'

import {Table, TableColumn} from 'element-ui'

export default {
  components: {Table, TableColumn},
  props: {
    pageParams: {
      type: Object,
      default: () => {
        return {}
      },
    },
    pageHeight: Number,
    pageWidth: Number,
  },
  data() {
    return {
      dataRows: [],
      dataRowsQueryUrl: '',
      dataRowsSelected: [],
      dataRowsLoading: false,
      queryDataRows: window.$debounce(this._queryDataRows, 300),
      dataRowsDeleteUrl: '',
      pagination: {
        defaultPageSize: 20,
        current: 1,
        total: 0,
        showTotal: total => `共 ${total} 条数据`,
      },
      queryParams: {
        pageSize: 20,
        pageIndex: 1,
        sortField: '',
        sortOrder: '',
      },
      queryConditions: {
      },
    }
  },
  computed: {
    ...mapState('ctx', {
      actionSuccessEvent: 'actionSuccessEvent',
    }),
    dataRowsSelectedKeys() {
      const keys = []
      for (let row of this.dataRowsSelected) {
        keys.push(row.id)
      }
      return keys;
    },
  },
  created() {
    this.init()
  },
  mounted() {
    this.init();
  },
  watch: {
    queryConditions: {
      handler: function() {
        this.queryParams.pageIndex = 1
        this.queryDataRows()
      },
      deep: true
    },
    queryParams: {
      handler: function () {
        this.queryDataRows()
      },
      deep: true
    },
    dataRowsQueryUrl() {
      this.queryDataRows();
    },
    actionSuccessEvent(e) {
      this.doFormSuccess(e)
    }
  },
  methods: {
    init() {
      this.queryDataRows()
    },
    _getQueryParams() {
      let params = {}
      for(let key in this.queryParams) {
        this.$set(params, key, this.queryParams[key])
      }
      for(let key in this.queryConditions) {
        this.$set(params, key, this.queryConditions[key])
      }
      return params
    },
    refreshDataRows() {
      setTimeout(() => {
        this.queryDataRows()
      }, 500)
    },
    _queryDataRows() {
      if (!this.dataRowsQueryUrl) {
        return
      }
      this.dataRowsLoading = true
      this.$http.post(this.dataRowsQueryUrl, this._getQueryParams()).then((rs) => {
        this.dataRowsLoading = false
        const result = rs.data
        if (result.success) {
          this.pagination.total = parseInt(result.data.totalRecords)
          this.pagination.current = result.data.pageIndex
          this.dataRows = result.data.result
        } else {
          this.dataRows = []
        }
      })
    },
    doPageChange(pageIndex) {
      this.queryParams.pageIndex = pageIndex
    },
    doTableSelect(selection) {
      this.dataRowsSelected = selection
    },
    doTableRowClick(row, column) {
      if (column.label != '操作' && this.formVisible) {
        this.doEdit(row)
      }
    },
    doTableRowDblclick(row, column) {
      if (column.label !== '操作') {
        this.doEdit(row)
      }
    },
    doTableSortChange({column, prop, order}) {
      if (order) {
        this.queryParams.sortField = column.columnKey || prop
        if (order.indexOf('desc')) {
          this.queryParams.sortOrder = 'desc'
        } else {
          this.queryParams.sortOrder = 'asc'
        }
      } else {
        this.queryParams.sortField = ''
        this.queryParams.sortOrder = ''
      }
    },
    doAdd(){
      // TODO
    },
    doEdit() {
      // TODO
    },
    doDelete(record) {
      let idList = []
      let url = this.dataRowsDeleteUrl
      if (record && record.id) {
        url += record.id
      } else {
        url += '0'
        idList = this.dataRowsSelectedKeys
        if (idList.length === 0) {
          this.$message.error('操作失败，请先选择要删除的数据！')
          return
        }
      }
      this.$http.post(url, idList).then((rs) => {
        const result = rs.data
        if (result.success) {
          this.$message.success(result.message);
          this.queryDataRows()
        } else {
          this.$message.error(result.message)
        }
      })
    },
    doQueryChange(params) {
      for(let key in params) {
        this.$set(this.queryConditions, key, params[key])
      }
      console.log(this.queryConditions, 'this.queryConditions');
    },
    doFormSuccess() {
      this.queryDataRows()
    },
  }
}
